@mark-right: `unescape("%u221A")`;
@mark-cross: `unescape("%D7")`;

@color-fh-base: #000;
@color-fh-base-light: #888;
@color-fh-base-lighter: #ccc;
@color-fh-base-lightest: #eee;
@color-fh-emphasize: #8888cc;
@color-fh-emphasize-light: lighten(@color-fh-emphasize, 8%);
@color-fh-emphasize-lighter: lighten(@color-fh-emphasize, 16%);
@color-fh-emphasize2: #f23656; // Red
@color-fh-emphasize2-light: lighten(@color-fh-emphasize2, 8%);
@color-fh-emphasize2-lighter: lighten(@color-fh-emphasize2, 16%);

@color-bg-base: #ccc;
@color-bg-base-light: lighten(@color-bg-base, 15%);
@color-bg-base-lighter: lighten(@color-bg-base, 30%);
@color-bg-base-dark: darken(@color-bg-base, 15%);
@color-bg-base-darker: darken(@color-bg-base, 30%);
//@color-bg-emphasize: #2672ec; // Blue
@color-bg-emphasize: #0072C6; // Blue Dark
//@color-bg-emphasize: #298F00; // Green
//@color-bg-emphasize: #D24726; // Orange
@color-bg-emphasize-light: lighten(@color-bg-emphasize, 8%);
@color-bg-emphasize-lighter: lighten(@color-bg-emphasize, 16%);
@color-bg-emphasize-dark: darken(@color-bg-emphasize, 8%);
@color-bg-emphasize-darker: darken(@color-bg-emphasize, 16%);
@color-bg-emphasize2: #f28686; // Red
@color-bg-emphasize2-light: lighten(@color-bg-emphasize2, 8%);
@color-bg-emphasize2-lighter: lighten(@color-bg-emphasize2, 16%);
@color-bg-emphasize2-dark: darken(@color-bg-emphasize2, 8%);
@color-bg-emphasize2-darker: darken(@color-bg-emphasize2, 16%);

.transition(@transition) {
  -webkit-transition: @transition;
  -moz-transition: @transition;
  -o-transition: @transition;
  transition: @transition;
}

.width-calc(@width, @ext: ~"") {
  width: -webkit-calc(@width) @ext;
  width: -moz-calc(@width) @ext;
  width: calc(@width) @ext;
}

.min-width-calc(@width, @ext: ~"") {
  min-width: -webkit-calc(@width) @ext;
  min-width: -moz-calc(@width) @ext;
  min-width: calc(@width) @ext;
}

.max-width-calc(@width, @ext: ~"") {
  max-width: -webkit-calc(@width) @ext;
  max-width: -moz-calc(@width) @ext;
  max-width: calc(@width) @ext;
}

.height-calc(@height, @ext: ~"") {
  height: -webkit-calc(@height) @ext;
  height: -moz-calc(@height) @ext;
  height: calc(@height) @ext;
}

.min-height-calc(@height, @ext: ~"") {
  min-height: -webkit-calc(@height) @ext;
  min-height: -moz-calc(@height) @ext;
  min-height: calc(@height) @ext;
}

.max-height-calc(@height, @ext: ~"") {
  max-height: -webkit-calc(@height) @ext;
  max-height: -moz-calc(@height) @ext;
  max-height: calc(@height) @ext;
}

html {
  height: 100%;
  body {
    height: 100%;
    overflow: auto;
  }
}
